// 创建一个路由器，并暴露出去

// 第一步：引入createRouter
import { createRouter, createWebHistory } from 'vue-router'
// 引入一个一个可能要呈现的路由组件
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
import News from '@/views/News.vue'
import Detail from '@/views/Detail.vue'

// 第二步：创建路由器
const router = createRouter({
  history: createWebHistory(), // 路由器的工作模式：history模式、hash模式
  // history: createWebHashHistory(), // 如果使用hash的路由模式的话，请求路径里面会携带#号
  // 而使用history路由模式，请求路径里面不带#号，但是需要服务器端配置处理解决#的问题
  routes: [
    // 一个一个的路由规则
    {
      // 主页
      name: 'home',
      path: '/home',
      component: Home,
    },
    {
      // 关于
      name: 'about',
      path: '/about',
      component: About,
    },
    {
      // 新闻
      name: 'news',
      path: '/news',
      component: News,
      children: [
        {
          name: 'detail',
          // path: '/news/detail',
          // 子级路由不需要写/斜杠。如果是params参数的话，需要进行占位，否则找不到。【其中后面加?代表该参数可传可不传】
          path: 'detail/:id/:content/:origin/:author/:category?',
          component: Detail,
          // 第一种写法：将路由收到的所有params参数作为props传给路由组件
          props: true, // 使用该配置props为true的时候，在接受参数的的时候，可以使用defineProps接收参数

          // 第二种写法：其中函数写法:function()可以省略。可以自己决定将上面作为props给路由组件
          // props(route) {
          //   console.log(route.params)
          //   // 如果是query传参的话，可以返回route.query，如果是params传参的话，可以直接使用props:true
          //   return route.params
          // },

          // 第三种写法：对象写法，可以自己决定将上面作为props给路由组件
          // props: {
          //   a: 100,
          //   b: 200,
          //   c: 300,
          // },
        },
      ],
    },
  ],
})

// 默认暴露router
export default router
